<template>
    <div style="margin: 20px;">

      <el-dialog title="发票打印" :visible.sync="dialogFormVisible" style="float:left">
      
        <table> 
          <tr>
            <td>发票号</td>        
    
            <td><el-input v-model="invoiceId"  placeholder="发票号" :disabled='true'></el-input></td>
          </tr>
          
        </table>

        <el-table
          :data="selectedDataP"
          max-height="300"
          tooltip-effect="dark"
          style="width: 100%"
          :default-sort = "{prop: 'date'}"
          >
          <el-table-column
            prop="projectName"
            label="项目名"
            width="200">
          </el-table-column>
          <el-table-column
            prop="price"
            label="单价"
            width="120">
          </el-table-column>
          <el-table-column
            prop="projectNum"
            label="数量"
            width="120">
          </el-table-column>
          
          </el-table>
<hr/>
        <el-table
          :data="selectedDataD"
          max-height="300"
          tooltip-effect="dark"
          style="width: 100%"
          :default-sort = "{prop: 'date'}"
          >
          <el-table-column
            prop="drugName"
            label="药品名"
            width="200">
          </el-table-column>
          <el-table-column
            prop="drugUnitPrice"
            label="单价"
            width="120">
          </el-table-column>
          <el-table-column
            prop="drugNum"
            label="数量"
            width="120">
          </el-table-column>
          
          </el-table>
          
          <table>
            <tr>
            <td>
            总金额:</td>
            <td><el-input v-model="totalMoney"  placeholder="总金额" :disabled='true'></el-input>
            </td>
            </tr>
          </table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="registerManyInvoice()">打印</el-button>
      </div>
      
    </el-dialog>

  <el-container>           
        <el-header >        
          <span style="font-size:60px">收费</span>
          <el-link type="primary" href="/#/initMain" style="float:right"><b>返回首页</b></el-link>
        </el-header>
        <el-main style="text-align:left">               
            <span ><b>患者信息查询</b></span><br/>
            <div>
            <el-form  :model="getMoneyForm" :rules="rules" ref="getMoneyForm" label-width="60px" class="demo-getMoneyForm">  
                <el-row :gutter="20">
                    <el-col :span="8">            
                <el-form-item label="病历号" prop="patientId" >
                <el-input v-model="getMoneyForm.patientId"  placeholder="病历号"></el-input>
                </el-form-item>
                    </el-col>
                    
                <el-button type="primary" @click="getMoneyPatient()" icon="el-icon-search">搜索</el-button>
                </el-row>
            </el-form>
            </div>
                
                <span ><b>患者信息确认</b></span>
                <table> 
                    <tr>
                        <td>姓名</td>        
                
                        <td><el-input v-model="name"  placeholder="姓名"></el-input></td><td></td>
                        <td>身份证号</td>
                        <td><el-input v-model="personId"  placeholder="身份证号"></el-input></td><td></td>
                        <td>家庭住址</td>
                        <td><el-input v-model="address"  placeholder="家庭住址"></el-input></td>
                    </tr>
                    
                </table>
                
              <hr/>
                <span ><b>项目消费信息</b></span>
                
                  <el-table
                    ref="multipleTableP"
                    :data="tableDataP"
                    max-height="300"
                    tooltip-effect="dark"
                    style="width: 100%"
                    :default-sort = "{prop: 'datetime'}"
                    @selection-change="handleSelectionChangeP">
                    <el-table-column
                      type="selection"
                      width="55">
                    </el-table-column>
                    <el-table-column
                      prop="patientId"
                      label="病历号"
                      width="150">
                    </el-table-column>
                    <el-table-column
                      prop="projectName"
                      label="项目名"
                      width="200">
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      label="单价"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="projectNum"
                      label="数量"
                      width="120">
                    </el-table-column>
                   
                    <el-table-column
                      prop="projectDatetime"
                      label="开立时间"
                      sortable
                      width="200">
                      <!--<template slot-scope="scope">{{ scope.row.datetime }}</template>-->
                    </el-table-column>
                    <el-table-column
                      prop="stateName"
                      label="状态"
                      width="120">
                    </el-table-column>
                    
                  </el-table>
                 

                  <span ><b>药品消费信息</b></span>
                
                  <el-table
                    ref="multipleTableD"
                    :data="tableDataD"
                    max-height="300"
                    tooltip-effect="dark"
                    style="width: 100%"
                    :default-sort = "{prop: 'datetime'}"
                    @selection-change="handleSelectionChangeD">
                    <el-table-column
                      type="selection"
                      width="55">
                    </el-table-column>
                    <el-table-column
                      prop="patientId"
                      label="病历号"
                      width="150">
                    </el-table-column>
                    <el-table-column
                      prop="drugName"
                      label="药品名"
                      width="200">
                    </el-table-column>
                    <el-table-column
                      prop="drugUnitPrice"
                      label="单价"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="drugNum"
                      label="数量"
                      width="120">
                    </el-table-column>
                   
                    <el-table-column
                      prop="drugDatetime"
                      label="开立时间"
                      sortable
                      width="200">
                      <!--<template slot-scope="scope">{{ scope.row.datetime }}</template>-->
                    </el-table-column>
                    <el-table-column
                      prop="stateName"
                      label="状态"
                      width="120">
                    </el-table-column>
                    
                  </el-table>

                  <table> 
                    <tr>
                        <td>预售费金额</td>        
                
                        <td><el-input v-model="cost" disabled placeholder="预售费金额"></el-input></td><td></td>
                        <td>支付方式</td>
                        <td>
                          <el-select v-model="payType" placeholder="请选择结算类型">
                          <!--<el-option label="现金" value="cash"></el-option>
                          <el-option label="网银" value="online"></el-option>-->
                          <el-option v-for="payType in payTypes" 
                          :label="payType.payTypeName" :value="payType.payTypeId"
                          :key="payType.patTypeId">
                          </el-option>
                          </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>实收</td>
                        <td><el-input v-model="realGet"  placeholder="实收金额"></el-input></td><td></td>
                        <td>找零</td>
                        <td><el-input v-model="theChange" disabled placeholder="找零"></el-input></td>
                    </tr>
                    <tr>
                      <td></td>
                      <td  align="right">
                        <el-button type="primary" style="float:center" @click="showInvoice" icon="el-icon-upload2">收费</el-button>
                        <span><font color='red'>点击确认后进入发票页</font></span>
                      </td>
                    </tr>
                

                </table>
                

              </el-main>
            </el-container>
   </div>
</template>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
    
  }
</style>

<script>
//import moment from 'moment';
 		//添加到Vue实例中以便全局使用

import axios from "axios";

  export default {
  
    data() {
      return {
        dialogFormVisible:false,
        invoiceId:'',
        totalMoney:0,

        name:'',
        personId:'',
        address:'',

        costP:0,
        costD:0,
        cost:0,
        payType:'',
        realGet:'',
        //theChange:this.realGet-this.cost,
        theChange:0,


        getMoneyForm:{
            patientId:''           
        },
        //发票数据
        

        rules: {
          patientId: [
            { required: true, message: '请输入病历号', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
          ]
        },
        payTypes:[
          {payTypeName:'现金',payTypeId:1},
          {payTypeName:'网银',payTypeId:2},
        ],
        tableDataP: [],
        selectedDataP:[],
        tableDataD:[],
        selectedDataD:[]
      }
    },
    watch:{
      realGet:function(newV, oldV){
        this.theChange=(newV*10-this.cost*10)/10;
        //this.theChange=newV-this.cost;
        //this.theChange=this.accSub(newV,this.cost);
      }
    },
    
    methods: {
     /* submitForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
                alert('submit!');
            } else {
                console.log('error submit!!');
                return false;
            }
        });
    },*/
    getMoneyPatient(){
      axios
        .get("/api/reception/findPatient", {
          params: {
            patientId: this.getMoneyForm.patientId
          }
        })
        .then(res => {
          console.log(res.data);
          this.name = res.data.name;
          this.personId = res.data.identified;
          this.address = res.data.address;
          //sessionStorage.setItem("patient", JSON.stringify(res.data));
          axios
            .get("/api/reception/findPatiPro", {
              params: {
                patientId: this.getMoneyForm.patientId,
                stateId:4
              }
            })
            .then(res => {
              console.log(res);
              this.tableDataP=[];
              this.tableDataP = res.data;
            })
            .catch(function(error) {
              console.log(error);
            });
          axios
            .get("/api/reception/findPatiDrug", {
              params: {
                patientId: this.getMoneyForm.patientId,
                stateId:4
              }
            })
            .then(res => {
              console.log(res);
              this.tableDataD=[];
              this.tableDataD = res.data;
            })
            .catch(function(error) {
              console.log(error);
            });
        });
    },
   
    handleSelectionChangeP(val) {
       //var self=this;
        /*this.multipleSelection = val;
        console.log(val);
        console.log(this.multipleSelection);*/
        let multipleSelection=this.$refs.multipleTableP.selection;
        console.log(val);
        console.log(multipleSelection);
        this.costP=0;
        this.cost=0;
        console.log(this.costP);
        //if(multipleSelection.length>0){
         /* for(let item in multipleSelection){
            console.log(item.price);
            //this.cost+=Double.valueOf(item.price);
          }*/
        //}
        if(multipleSelection.length>0){
          multipleSelection.forEach(item=>{
            this.costP+=item.price*item.projectNum;
          });
          this.cost=this.costP+this.costD;
        }
        this.selectedDataP=multipleSelection;
        console.log(this.costP);
        console.log(this.selectedDataP);

      },

    
    handleSelectionChangeD(val) {
       //var self=this;
        /*this.multipleSelection = val;
        console.log(val);
        console.log(this.multipleSelection);*/
        let multipleSelection=this.$refs.multipleTableD.selection;
        console.log(val);
        console.log(multipleSelection);
        this.costD=0;
        this.cost=0;
        console.log(this.costD);
        //if(multipleSelection.length>0){
         /* for(let item in multipleSelection){
            console.log(item.price);
            //this.cost+=Double.valueOf(item.price);
          }*/
        //}
        if(multipleSelection.length>0){
          multipleSelection.forEach(item=>{
            this.costD+=item.drugUnitPrice*item.drugNum;
          });
          this.cost=this.costP+this.costD;
        }
        this.selectedDataD=multipleSelection;
        console.log(this.costD);
        console.log(this.selectedDataD);

      },

    
    showInvoice(){
      this.dialogFormVisible=true;
      this.invoiceId=new Date().getTime();
      this.totalMoney=this.cost;

    },
    //发票写入数据库
    registerManyInvoice(){
      var invoice=JSON.stringify({
        invoiceId:this.invoiceId,
        invoiceDatetime:new Date(),
        payTypeId:this.payType,
        isLegal:1,
        printTimes:1,
        money:this.cost,
        });
      console.log(invoice);
      axios
      .post("/api/reception/registerInvoice",invoice,{
        headers:{"Content-Type":"application/json;charset=utf-8"}
        /*// params :{
        //   ppk:patiProKey,
        //   pp:patPro
        // }*/
      }).then(res => {
      console.log(res.data);
      if(this.selectedDataP.length>0){
          this.selectedDataP.forEach(item=>{
            this.changePatiPro(item);
          });
      }
      if(this.selectedDataD.length>0){
          this.selectedDataD.forEach(item=>{
            this.changePatiDrug(item);
          });
      }
      this.dialogFormVisible=false;
      alert('打印成功');
    }).catch(function(error) {
      console.log(error);
    });
    
    
  },
    //项目修改为已缴费
    changePatiPro(item){
      let patiPro=JSON.stringify({
          patientId:this.getMoneyForm.patientId,
          projectName:item.projectName,
          invoiceId:this.invoiceId,
          //projectNum:this.item.projectNum,
          projectDatetime:new Date() ,
          stateId:5
        });
        console.log(patiPro);
        axios
        .post("/api/reception/updatePatiPro",patiPro,{
          headers:{"Content-Type":"application/json;charset=utf-8"}
          /*// params :{
          //   ppk:patiProKey,
          //   pp:patPro
          // }*/
        })
        .then(res => {
          console.log(res.data);
          /*this.tableDataM.splice(this.location,1);
          this.dialogFormVisible=false;*/
          })
        .catch(function(error) {
          console.log(error);
        });
    },
    //药品修改为已缴费
    changePatiDrug(item){
      let patiDrug=JSON.stringify({
          patientId:this.getMoneyForm.patientId,
          drugId:item.drugId,
          invoiceId:this.invoiceId,
          //drugNum:item.drugNum,
          drugDatetime:new Date(),
          //new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()) 
          stateId:5
        });
        console.log(patiDrug);
        axios
        .post("/api/reception/updatePatiDrug",patiDrug,{
          headers:{"Content-Type":"application/json;charset=utf-8"}
          /*// params :{
          //   ppk:patiProKey,
          //   pp:patPro
          // }*/
        })
        .then(res => {
          console.log(res.data);
          /*this.tableDataM.splice(this.location,1);
          this.dialogFormVisible=false;*/
          })
        .catch(function(error) {
          console.log(error);
        });
    }

  }

    
    
}
</script>